<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue3.js"></script>
     <style>
         *{margin: 0;padding: 0;}
          ul,li{list-style: none;}
          .main{
             width: 900px;
             margin: 0 auto;
          }
          .panel-heading{
              padding: 30px 0 10px 0;
              background-color: gold;
              color: #333;
              text-align: center;
          }
          .badge{
              padding: 2px 10px;
              border-radius: 6px;
              background-color: goldenrod;
              color: #fff;
              cursor: pointer;
          }
          .form-control{
              display: inline-block;
              margin: 20px 0;
              width: 800px;
              height: 40px;
              border: 1px solid #eee;
              box-sizing: border-box;
          }
          .input-group-btn{ display: inline-block;}
          .btn-primary{
              width: 95px;
              height: 40px;
              box-sizing: border-box;
              border: none;
              color: #fff;
              cursor: pointer;
              background-color: rgb(41, 141, 207);
          }
          .btn-group{
              display: flex;
          }
          .btn-default{
              flex:1;
              width: 300px;
              height: 40px;
              border: 1px solid #ccc;
              box-sizing: border-box;
              line-height: 40px;
              text-align: center;
              cursor: pointer;
              background-color: gold;
          }
          .btn-group .selected{
               background-color: goldenrod;
               color: #fff;
          }
          .ul-group-lists{
              width: 100%;
              box-sizing: border-box;
              border: 1px solid #eee;
          }
          .list-group-item{
             display: flex;
             padding:20px;
             border-bottom: 1px solid #ddd;
             justify-content: space-between;
          }
          .line-through{
              text-decoration: line-through;
          }
          .pd5{
             padding-left: 5px;
          }
     </style>
</head>
<body>

    <div id="app" class="main">
        <div class="panel panel-info" style="margin:20px 0;">
            <!--头部text-->
            <div class="panel-heading">
                <h1>vue定制学习计划</h1>
                <div>
                    <a>共有<span class="badge">{{this.total}}</span>个计划,</a>
                    <a>已完成: <span class="badge">{{this.confNum}}</span></a>
                    <a>未完成: <span class="badge">{{this.noNum}}</span></a>
                </div>
            </div>

            <div class="panel-body">
                <div class="input-group">
                    <input v-model="input" type="text" class="form-control text-keyword" placeholder="输入小目标后，按回车确认" />
                    <span class="input-group-btn" @click="add()">
                       <button class="btn btn-primary">添加计划</button>
                    </span>
                </div>
                <div class="btn-group btn-group-justified">
                    <template  v-for="(item,index) in tabs">
                        <a class="btn-default" :class="currentIndex===index?'selected':''"  @click="tabChage(index)">{{item.name}}</a>
                    </template>
                </div>

                <ul class="ul-group-lists">
                    <li :key="index" class="list-group-item" v-for="(v,index) in newItmes">
                        <div>
                            <input type="checkbox" v-model="v.check" />
                            <span :class="v.check?'line-through':''" class="pd5"> {{v.name}}</span>
                        </div>
                        <a class="badge" @click="delEvent(v.id)">删除</a>
                    </li>
                </ul>
                
            </div>

        </div>
    </div>     
    <script src="./index.js"></script>   
</body>
</html>